{{#if this.typeIsString}}
  <EditableField
    data-test-custom-string-field
    @value={{get @document @field}}
    @onChange={{@onChange}}
    @loading={{@loading}}
    @disabled={{@disabled}}
  >
    <:default>
      {{#let (get @document @field) as |documentField|}}
        <p
          class="hds-typography-body-200 hds-foreground-primary truncate
            {{unless documentField 'italic'}}"
          title={{or documentField "None"}}
        >
          {{#if documentField}}
            {{documentField}}
          {{else}}
            <CustomEditableFields::EmptyState />
          {{/if}}
        </p>
      {{/let}}
    </:default>
    <:editing as |F|>
      <Hds::Form::Textarea::Field
        @value={{F.value}}
        name={{field}}
        {{on "blur" F.update}}
        data-test-custom-string-field-input
      />
    </:editing>
  </EditableField>

{{else if this.typeIsPeople}}
  <EditableField
    data-test-custom-people-field
    @value={{get @attributes "value"}}
    @onChange={{@onChange}}
    @loading={{@loading}}
    @disabled={{@disabled}}
  >
    <:default>
      {{#if this.people.length}}
        <ol class="list-none">
          {{#each this.people as |person|}}
            <li class="whitespace-nowrap">
              {{#if person.imgURL}}
                <img
                  src="{{person.imgURL}}"
                  class="align-middle h-4 w-4 rounded-full"
                />
              {{/if}}
              {{person.email}}
            </li>
          {{/each}}
        </ol>
      {{else}}
        <CustomEditableFields::EmptyState />
      {{/if}}
    </:default>
    <:editing as |F|>
      <Inputs::PeopleSelect
        class="multiselect--narrow"
        @selected={{this.people}}
        @onChange={{this.updateEmails}}
        {{click-outside (fn F.update this.emails)}}
        data-test-custom-people-field-input
      />
    </:editing>
  </EditableField>
{{/if}}
